<template>
	<div>
		<div class="headerbox">
			<div class="header">
				<div class="headerL">
					<router-link
						to="/business"
						class="goback"
						><img src="/assets/images/goback.png"
					/></router-link>
				</div>
				<div class="headerC">
					<p>修改个人资料</p>
				</div>
				<div class="headerR"></div>
			</div>
		</div>
		<div class="clear"></div>
		<div class="h50"></div>
		<div class="clear"></div>
		<div class="user">
			<div class="user-image">
				<img
					:src="this.$cookies.get('User').avatar_text"
					alt="" />
			</div>
		</div>
		<div class="ChangeForm">
			<van-form @submit="onSubmit">
				<van-field
					v-model="nickname"
					name="nickname"
					label="昵称"
					placeholder="请输入需要修改的昵称" />
				<van-field
					v-model="password"
					name="password"
					label="密码"
					placeholder="请输入需要修改的密码"
					:rules="[{ validator: passwordFun }]" />
				<van-field
					v-model="email"
					name="email"
					label="邮箱"
					placeholder="请输入需要修改的邮箱"
					:rules="[{ validator: emailFun }]" />
				<van-field
					v-model="area"
					is-link
					readonly
					name="area"
					label="地区选择"
					placeholder="点击选择省市区"
					@click="showArea = true" />
				<van-popup
					:show="showArea"
					position="bottom">
					<van-area
						:area-list="areaList"
						v-model="value"
						@confirm="onConfirm"
						@cancel="showArea = false" />
				</van-popup>

				<van-field
					name="sex"
					label="性别">
					<template #input>
						<van-radio-group
							v-model="sex"
							direction="horizontal">
							<van-radio name="0">保密</van-radio>
							<van-radio name="1">男</van-radio>
							<van-radio name="2">女</van-radio>
						</van-radio-group>
					</template>
				</van-field>

				<van-field
					name="avatar"
					label="修改头像">
					<template #input>
						<van-uploader
							v-model="avatar"
							:max-count="1" />
					</template>
				</van-field>

				<div style="margin: 16px">
					<van-button
						round
						block
						type="primary"
						native-type="submit">
						提交
					</van-button>
				</div>
			</van-form>
		</div>

		<!-- 网络请求加载状态 -->
		<van-overlay :show="isLoading" style="display: flex; justify-content: center; align-items: center;">
			<van-loading vertical>
				<template #icon>
					<van-icon name="star-o" size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>
	</div>
</template>

<script>
	import { areaList } from "@vant/area-data";
	import { showFailToast, showSuccessToast } from "vant";
	export default {
		data() {
			return {
				// 显示地区选择
				showArea: false,
				// 全部地区码
				areaList,
				// 昵称
				nickname: this.$cookies.get("User").nickname,
				// 密码
				password: "",
				// 邮箱
				email: this.$cookies.get("User").email,
				// 地区
				area: this.$cookies.get("User").region,
				// 性别
				sex: this.$cookies.get("User").gender,
				// 图片
				avatar: [],
				// 地区码，选择地区时会显示当前的地区
				value: this.$cookies.get("User").district,
				// 储存选择的地区码
				areas: [],
				isLoading: false,
			};
		},
		methods: {
			// 区选择
			onConfirm(val) {
				this.area = `${val.selectedOptions[0].text} ${val.selectedOptions[1].text} ${val.selectedOptions[2].text}`;
				this.showArea = false;
				this.areas = val.selectedValues;
			},
			passwordFun(val) {
				if (val) {
					let x = val.search(/^[\w|\W]{3}/);
					if (x == 0) {
						return true;
					} else {
						return "格式不正确";
					}
				} else {
					return true;
				}
			},
			emailFun(val) {
				if (val) {
					let x = val.search(/^\w*@{1}\w*.{1}\w+$/);
					if (x == 0) {
						return true;
					} else {
						return "格式不正确";
					}
				} else {
					return true;
				}
			},
			async onSubmit(val) {
				let data = {
					id: this.$cookies.get("User").id,
					nickname: this.nickname,
					email: this.email,
					gender: this.sex,
				};

				if (this.password) {
					data.password = this.password;
				}

				if (this.areas[0] && this.areas[1] && this.areas[2]) {
					data.province = this.areas[0];
					data.city = this.areas[1];
					data.district = this.areas[2];
				}

				let avatarfile = null;
				// 判断是否有头像上传
				if (this.avatar[0] != undefined) {
					avatarfile = this.avatar[0].file ? this.avatar[0].file : "";
				}

				if (avatarfile) {
					data.avatar = avatarfile;
				}

				this.isLoading = true;
				const res = await this.$api.Change(data);
				  
				if (res.code == 1) {
					showSuccessToast({ message: res.msg });
					this.$router.push("/business");
				} else {
					showFailToast({ message: res.msg });
				}

				this.isLoading = false;
			},
		},
	};
</script>

<style scoped>
	/* @import url("/assets/css/profile.css"); */
	.headerL {
		width: 40px;
		height: 100% !important;
	}

	.headerL > a {
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
	}

	.headerL > a > img {
		width: 60%;
		height: 60% !important;
		padding-top: 0 !important;
	}

	.headerC {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ChangeForm {
		padding: 0 10px;
	}

	.user {
		width: 100%;
		height: 50vw;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: aquamarine;
	}

	.user-image {
		width: 20vw;
		height: 20vw;
		overflow: hidden;
	}

	.user-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		border-radius: 50%;
	}
</style>
